<template>
  <div>
    <title>
      <span>1111</span>
    </title>
    <div class="common-layout">
      <div class="common-layout1">
        <el-header>
          <h2>机构管理</h2>
          <div class="container-button">
    <div class="hover bt-1"></div>
    <div class="hover bt-2"></div>
    <div class="hover bt-3"></div>
    <div class="hover bt-4"></div>
    <div class="hover bt-5"></div>
    <div class="hover bt-6"></div>
    <button @click="logout"></button>
  </div>
        </el-header>
      </div>
        <el-container>
          <el-aside width="250px">
            <el-menu default-active="2" class="el-menu-vertical-demo">
              <el-sub-menu index="1">
                <template #title>
                  <span>信息管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-1" @click="goToUser">
                    <span>视频管理</span>
                  </el-menu-item>
                  <el-menu-item index="1-2" @click="goOrganization">
                    <span>机构管理</span>
                  </el-menu-item> 
                  <el-menu-item index="1-3" @click="goToAdmin">
                    <span>机构管理员管理</span>
                  </el-menu-item>
                  <el-menu-item index="1-4" @click="goToQuestion">
                    <span>试卷管理</span>
                  </el-menu-item>
                  <el-menu-item index="1-5" @click="goToPlan">
                    <span>培训计划管理</span>
                  </el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-aside>
          <el-container>
          <el-main>
            <header>
            <div class="toolbar">
              <el-dropdown>
              <el-icon >
    
              </el-icon>
                <template #dropdown>
                    <el-dropdown-menu>
                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </header>
            <router-view />
          </el-main>
        </el-container>
          </el-container>
    </div>
  </div>
</template>
<script setup>
import { Menu as IconMenu, Message,   } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { ElCard, ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus';
const router = useRouter();

const goToUser = () => {
  router.push('/videoPlayer');
};
const goOrganization = () => {
  router.push('/organization');
};
const goToAdmin = () => {
  router.push('organizationAdmin');
};
const goToPlan = () => {
  router.push('/plan');
};
const goToQuestion = () => {
  router.push('/question');
};
// const goToSetProduct = () => {
//   router.push('/set-product');
// };

// const goToContract = () => {
//   router.push('/contract-management');
// };
// const goToReceivable = () => {
//   router.push('/receivable-management');
// }
// const goToMessage = () => {

//   router.push('message-management');
// };
// const goToActivity = () =>{
//   router.push('activity-management');
// };
// const goToWeekly = () =>{
//   router.push('weeklyReport');
// };
// 登出函数
const logout = () => {
  // 清除登录状态，例如从 localStorage 中移除
  localStorage.removeItem('isLoggedIn');
  // 显示退出登录的消息
  ElMessage({
    message: '退出登录',
    type: 'info',
  });
  // 重定向到登录页面
  router.push('/login');
};
</script>
<style scoped>
.common-layout {
  height: 98vh;
  display: flex;
  flex-direction: column;
}
.common-layout1 {
  background-color: #333; /* 深灰色背景 */
  color: #fff; /* 白色字体 */
  text-align: center; /* 文本居中 */
  height: 60px; /* 根据需要调整高度 */
  line-height: 10px; /* 垂直居中文本 */
  border-top-left-radius: 8px; /* 左上角圆角 */
  border-top-right-radius: 8px; /* 右上角圆角 */
  font-size: 24px; /* 字体大小 */
}

.header-title {
  font-size: 40px; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
  color: rgb(90, 66, 66); /* 白色字体 */
  margin-right: auto; /* 使标题靠左 */
}
.toolbar {
  position: absolute;
  right: 20px;
  top: 60px;
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
}


/* 标题样式 */
.header-title {
  font-size: 20px; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
  color: #fff; /* 白色字体 */
}
/* From Uiverse.io by MuhammadHasann */ 
.container-button {
  left: 1800px;   
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "bt-1 bt-2 bt-3"
    "bt-4 bt-5 bt-6";
  position: relative;
  perspective: 800;
  padding: 0;
  width: 135px;
  height: 47px;
  transition: all 1.8s ease-in-out;
}

.container-button:active {
  transform: scale(0.95);
}

.hover {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 200;
}

.bt-1 {
  grid-area: bt-1;
}

.bt-2 {
  grid-area: bt-2;
}

.bt-3 {
  grid-area: bt-3;
}

.bt-4 {
  grid-area: bt-4;
}

.bt-5 {
  grid-area: bt-5;
}

.bt-6 {
  grid-area: bt-6;
}

.bt-1:hover ~ button {
  transform: rotateX(15deg) rotateY(-15deg) rotateZ(0deg);
  box-shadow: -2px -2px #18181888;
}

.bt-1:hover ~ button::after {
  animation: shake 0.5s ease-in-out 1.8s;
  text-shadow: -2px -2px #18181888;
}

.bt-3:hover ~ button {
  transform: rotateX(15deg) rotateY(15deg) rotateZ(0deg);
  box-shadow: 2px -2px #18181888;
}

.bt-3:hover ~ button::after {
  animation: shake 0.5s ease-in-out 1.8s;
  text-shadow: 2px -2px #18181888;
}

.bt-4:hover ~ button {
  transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg);
  box-shadow: -2px 2px #18181888;
}

.bt-4:hover ~ button::after {
  animation: shake 0.5s ease-in-out 1.8s;
  text-shadow: -2px 2px #18181888;
}

.bt-6:hover ~ button {
  transform: rotateX(-15deg) rotateY(15deg) rotateZ(0deg);
  box-shadow: 2px 2px #18181888;
}

.bt-6:hover ~ button::after {
  animation: shake 0.5s ease-in-out 1.8s;
  text-shadow: 2px 2px #18181888;
}

.hover:hover ~ button::before {
  background: transparent;
}

.hover:hover ~ button::after {
  content: "退出";
  top: -150%;
  transform: translate(-50%, 0);
  font-size: 34px;
  color: #f19c2b;
}

button {
  position: absolute;
  padding: 0;
  width: 135px;
  height: 47px;
  background: transparent;
  font-size: 17px;
  font-weight: 900;
  border: 3px solid #f39923;
  border-radius: 12px;
  transition: all 1.8s ease-in-out;
}

button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 135px;
  height: 47px;
  background-color: #f5ae51;
  border-radius: 12px;
  transition: all 1.8s ease-in-out;
  z-index: -1;
}

button::after {
  content: "点我";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 135px;
  height: 47px;
  background-color: transparent;
  font-size: 17px;
  font-weight: 900;
  line-height: 47px;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  transition: all 1.8s ease-in-out;
  z-index: 2;
}

@keyframes shake {
  0% {
    left: 45%;
  }

  25% {
    left: 54%;
  }

  50% {
    left: 48%;
  }

  75% {
    left: 52%;
  }

  100% {
    left: 50%;
  }
}
</style>